<template>
  <div class="divide-policy">
    <Card>
      <Form :model="form">
        <Row gutter="30">
          <i-col span="6">
            <FormItem>
              <Cascader change-on-select :data="organizationList" :disabled="manageComFlag" v-model="form.manageCom" placeholder="管理机构" clearable></Cascader>
            </FormItem>
          </i-col>
          <i-col span="6">
            <FormItem>
              <Select
                :disabled="saleChnlFlag"
                v-model="form.saleChnl"
                placeholder="渠道"
                clearable
              >
                <Option
                  :value="item.saleChnl"
                  v-for="item in salechnlList"
                  :key="item.saleChnl"
                  >{{ item.saleChnlName }}</Option
                >
              </Select>
            </FormItem>
          </i-col>
        </Row>
      </Form>
    </Card>
    <Card>
      <p slot="title">问卷内容配置</p>
      <div v-for="(item, index) in subjectList" :key="index" class="subject">
        <div class="fatherContent">
          <div style="width: 50px">问题{{ index + 1 }}</div>
          <Select
            v-model="subjectList[index].questionType"
            v-show="item.questionType == ''"
          >
            <Option
              v-for="item in typeList"
              :value="item.value"
              :key="item.value"
              >{{ item.label }}</Option
            >
          </Select>
          <Input
            v-if="item.questionType !== ''"
            v-model="item.questionDetail"
            placeholder="输入问题"
            maxlength="50"
          />
          &nbsp;&nbsp;
          <Icon type="md-settings" size="20" @click="resetSelect(index)" />
          &nbsp;&nbsp;
          <i-switch
            size="large"
            style="width: 75px"
            true-value="1"
            false-value="0"
            v-model="subjectList[index].isMust"
          >
            <span slot="open">必填</span>
            <span slot="close">非必填</span>
          </i-switch>
        </div>
        <!-- 单选 -->
        <div style="margin-left: 50px" v-if="item.questionType == '1'">
          <RadioGroup vertical>
            <Radio
              class="radioOne"
              v-for="(it, ix) in item.surveyQuestion"
              :key="ix"
              :label="ix"
            >
              <Icon type="social-apple"></Icon>
              <Input
                placeholder="输入内容"
                class="radioText"
                v-model="subjectList[index].surveyQuestion[ix]"
                maxlength="50"
              />
              <Icon
                type="ios-remove-circle-outline"
                size="20"
                @click.stop="removeItem(index, ix)"
              />
            </Radio>
            <Radio
              class="radioOne"
              label="Y"
              v-if="item.isAnotherQuestionFlag == 'Y'"
            >
              <Icon type="social-apple"></Icon>
              <Input
                placeholder="请输入其他内容"
                class="radioText1"
                v-model="subjectList[index].isAnotherQuestion"
                maxlength="50"
              />
              <Input class="radioText1" readonly />
              <Icon
                type="ios-remove-circle-outline"
                size="20"
                @click.stop="removeItemOther(index)"
              />
            </Radio>
          </RadioGroup>
          <div class="addText">
            <span @click="addItem(index)">
              <Icon type="md-add" />添加选项&nbsp;&nbsp;&nbsp;&nbsp;
            </span>
            <span @click="addOther(index)">
              <Icon type="md-add" />添加【其他】选项
            </span>
          </div>
        </div>
        <!-- 多选 -->
        <div style="margin-left: 50px" v-if="item.questionType == '2'">
          <CheckboxGroup vertical v-model="checkAllGroup">
            <Checkbox
              class="radioOne"
              v-for="(it, ix) in item.surveyQuestion"
              :key="ix"
              :label="ix"
            >
              <Icon type="social-apple"></Icon>
              <Input
                placeholder="输入内容"
                class="radioText"
                maxlength="50"
                v-model="subjectList[index].surveyQuestion[ix]"
              />
              <Icon
                type="ios-remove-circle-outline"
                size="20"
                @click.stop="removeItem(index, ix)"
              />
            </Checkbox>
            <Checkbox
              class="radioOne"
              label="Y"
              v-if="item.isAnotherQuestionFlag == 'Y'"
            >
              <Icon type="social-apple"></Icon>
              <Input
                placeholder="请输入其他内容"
                maxlength="50"
                class="radioText1"
                v-model="subjectList[index].isAnotherQuestion"
              />
              <Input class="radioText1" readonly />
              <Icon
                type="ios-remove-circle-outline"
                size="20"
                @click.stop="removeItemOther(index)"
              />
            </Checkbox>
          </CheckboxGroup>
          <div class="addText">
            <span @click="addItem(index)">
              <Icon type="md-add" />添加选项&nbsp;&nbsp;&nbsp;&nbsp;
            </span>
            <span @click="addOther(index)">
              <Icon type="md-add" />添加【其他】选项
            </span>
          </div>
        </div>
      </div>
    </Card>
    <Card style="margin-top: 10px">
      <div @click="addList" class="addText1">
        <Icon type="md-add" />添加一题
      </div>
    </Card>
    <div style="text-align: center; margin-top: 20px">
      <Button type="primary" shape="circle" @click="submit"
        >保存问卷模板</Button
      >
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      manageComFlag: false,
      saleChnlFlag: false,
      // reagentorganizationList: [],
      organizationList:[],
      subjectList: [
        {
          questionType: "",
          isMust: "0",
          questionDetail: "",
          surveyQuestion: [],
          isAnotherQuestionFlag: "N",
          isAnotherQuestion: "其他",
        },
      ],
      typeList: [
        {
          value: "1",
          label: "单选题",
        },
        {
          value: "2",
          label: "多选题",
        },
        {
          value: "3",
          label: "填空题",
        },
      ],
      form: {
        manageCom: [],
        saleChnl: "",
      },
      salechnlList: [],
      single: "",
      checkAllGroup: [],
      questionId: "",
    };
  },
  methods: {
    submit() {
      if (this.form.manageCom == "") {
        this.$Message.error({
          content: "请选择管理机构！",
          duration: 3,
        });
        return;
      }
      if (this.form.saleChnl == "") {
        this.$Message.error({
          content: "请选择渠道！",
          duration: 3,
        });
        return;
      }
      console.log(this.subjectList, "990");
      if (
        this.subjectList[0].questionType == "" ||
        this.subjectList[0].questionDetail == ""
      ) {
        this.$Message.error({
          content: "问题1未录入！",
          duration: 3,
        });
        return;
      }
      let arr = [];
      for (let index = 0; index < this.subjectList.length; index++) {
        if (this.subjectList[index].questionType !== "") {
          if (
            this.subjectList[index].questionType !== "3" &&
            this.subjectList[index].questionDetail !== "" &&
            (this.subjectList[index].surveyQuestion.length == 0 ||
              this.subjectList[index].surveyQuestion.includes(""))
          ) {
            this.$Message.error({
              content: `问题${index + 1}的选项未录入，请录入！`,
              duration: 3,
            });
            return;
          } else {
            if (this.subjectList[index].questionDetail == "") {
              this.$Message.error({
                content: `问题${index + 1}未录入，请录入！`,
                duration: 3,
              });
              return;
            }
          }
        } else {
          arr.push(index + 1);
        }

        if (this.subjectList[index].isAnotherQuestionFlag == "Y") {
          if (this.subjectList[index].isAnotherQuestion == "") {
            this.$Message.error({
              content: `问题${index + 1}的其他选项未录入，请录入！`,
              duration: 3,
            });
            return;
          }
        }
      }

      if (arr.length > 0) {
        this.$Modal.confirm({
          content: `问题${arr}未录入，是否继续操作？`,
          onOk: () => {
            arr.reverse().map((item) => {
              console.log(item);
              this.subjectList.splice(item - 1, 1);
            });
            let obj = {
              surveyContentDTO: this.subjectList,
              manageCom: this.form.manageCom[this.form.manageCom.length-1],
              saleChnl: this.form.saleChnl,
              questionId: this.questionId,
            };
            this.api.insertSurvey(obj).then((res) => {
              if (res.code == 200) {
                this.$Message.success("保存成功！");
                this.$router.go(-1);
              } else {
                this.$Message.error(res.msg);
              }
            });
          },
          onCancel: () => {},
        });
        return;
      }
      let obj = {
        surveyContentDTO: this.subjectList,
        manageCom: this.form.manageCom[this.form.manageCom.length-1],
        saleChnl: this.form.saleChnl,
        questionId: this.questionId,
      };
      this.api.insertSurvey(obj).then((res) => {
        if (res.code == 200) {
          this.$Message.success("保存成功！");
          this.$router.go(-1);
        } else {
          this.$Message.error(res.msg);
        }
      });
    },
    addList() {
      this.subjectList.push({
        questionType: "",
        isMust: "0",
        questionDetail: "",
        surveyQuestion: [],
        isAnotherQuestionFlag: "N",
        isAnotherQuestion: "其他",
      });
    },
    removeItemOther(index) {
      this.subjectList[index].isAnotherQuestionFlag = "N";
    },
    removeItem(index, ix) {
      console.log(index, ix, this.subjectList[index]);
      this.subjectList[index].surveyQuestion.splice(ix, 1);
    },
    addItem(index) {
      this.subjectList[index].surveyQuestion.push("");
    },
    addOther(index) {
      if (this.subjectList[index].isAnotherQuestionFlag == "Y") {
        this.$Message.error({
          content: "您已添加其他选项！",
          duration: 3,
        });
      }
      this.subjectList[index].isAnotherQuestionFlag = "Y";
    },
    resetSelect(index) {
      this.$set(this.subjectList[index], "questionType", "");
      setTimeout(() => {
        this.$set(this.subjectList[index], "questionType", "");
      }, 100);
    },
    // 进入页面初始化
    initialize() {
      // this.api.professionalList().then((res) => {
      //   this.reagentOrganizationList = res.data.listKeyValueVOS;
      // });
      this.api.remanagecomList().then(res => {
        if (res.code == 200 && res.data != null) {
          let arr = []
          arr.push(res.data)
          arr.forEach(one=>{
            one.value = one.comcode
            one.label = one.comcode + '-' + one.name
            one.children = one.chilDren || []
            if (one.children) {
              one.chilDren.forEach(two=>{
                two.value = two.comcode
                two.label = two.comcode + '-' + two.name
                two.children = two.chilDren || []
                if (two.children) {
                  two.children.forEach(three=>{
                    three.value = three.comcode
                    three.label = three.comcode + '-' + three.name
                    three.children = three.chilDren || []
                    if (three.children) {
                      three.children.forEach(four=>{
                        four.value = four.comcode
                        four.label = four.comcode + '-' + four.name
                        four.children = four.chilDren || []
                      })
                    }
                  })
                }
              })
            }
          })
          console.log(arr);
          this.organizationList = arr
        } else {
          this.organizationList = [];
        }
      });
    },
    getSaleChnl() {
      this.api.getSaleChnl().then((res) => {
        this.salechnlList = res.data;
      });
    },
    getQuestionDetail() {
      let obj = {
        manageCom: this.$route.query.row.manageCom[this.$route.query.row.manageCom.length-1],
        saleChnl: this.$route.query.row.saleChnl,
      };
      this.api.getQuestionDetail(obj).then((res) => {
        if (res.code == 200) {
          this.subjectList = res.data;
        }
      });
    },
  },
  created() {
    this.initialize();
    // this.reagentOrganizationList = JSON.parse(
    //   sessionStorage.getItem("reagentOrganizationList")
    // );
  },
  mounted() {
    this.getSaleChnl();
    if (Object.keys(this.$route.query).length !== 0) {
      this.getQuestionDetail();
      this.form.manageCom = this.$route.query.row.manageCom;
      console.log(this.$route.query.row.manageCom,'this.$route.query.row.manageCom');
      this.form.saleChnl = this.$route.query.row.saleChnl;
      this.manageComFlag = this.form.manageCom ? false : true;
      this.saleChnlFlag = this.form.saleChnlFlag == "" ? false : true;
      this.questionId = this.$route.query.row.questionId;
    }
  },
};
</script>
<style lang="less">
.ivu-modal-header {
  background-color: #2d8cf0 !important;
}
.divide-policy {
  .ivu-input-number {
    width: 100% !important;
  }
}

.divide-policy .ivu-input-number {
  width: 100%;
}
</style>

<style scoped lang="less">
@import "./user";
.ivu-modal-header {
  background-color: #2d8cf0;
}
.ivu-modal-close .ivu-icon-ios-close {
  color: #fff;
}

.stopClass > .ivu-modal {
  top: 0;
  left: 25px;
}
.addClass > .ivu-modal {
  top: 140px;
}
.updateClass > .ivu-modal {
  top: 140px;
}
.btngroup {
  width: 100%;
  display: flex;
  justify-content: center;
}
.btngroup .ivu-col-span-8 {
  display: inline-block;
  width: 100px;
}
.fatherContent {
  display: flex;
  align-items: center;
}
.radioOne {
  margin: 10px 0;
}
.radioText {
  @cap: 700px;
  width: calc(~"100vw - @{cap}");
}
.radioText1 {
  @cap: 352px;
  width: calc(~"50vw - @{cap}");
}
.addText {
  color: #12affd;
}
.addText1 {
  color: #12affd;
  text-align: center;
}
.subject {
  margin-bottom: 20px;
}
</style>

